<template>
  <div>
    <el-table
      v-loading="loading"
      :data="data"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#f4f6f8'}"
    >
      <!-- 添加序号列 -->
      <el-table-column
        type="index"
        label="序号"
        width="50"
        :index="index"
      />
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      >
        <template slot-scope="scope">
          <!-- 如果是自定义的列走这里 -->
          <div v-if="column.custom">
            <slot :name="column.prop" :row="scope.row" />
          </div>
          <!-- 不是自定义的列就默认显示内容 -->
          <div v-else>
            {{ scope.row[column.prop] }}
          </div>
        </template>
      </el-table-column>

      <template slot="empty">
        <img src="../assets/empty.svg" alt style="margin: 120px auto 8px auto; height: 50; width: 78px; display: block">
        <p style="line-height: 22px; font-size: 14px; margin-bottom: 60px">暂无数据</p>
      </template>
    </el-table>
    <my-pagination :total="total" @change="(val)=>{handlerPageChange(val)}" />
  </div>
</template>

<script>
import MyPagination from '@/components/my-pagination'
export default {
  components: {
    MyPagination
  },
  props: {
    data: Array, // 表格数据
    columns: Array, // 表格列配置
    total: Number,
    onPageChange: Function,
    loading: Boolean
  },
  data() {
    return {
      pageParams: {
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    index() {
      return this.pageParams.page > 1
        ? (this.pageParams.page - 1) * this.pageParams.pageSize + 1
        : 1
    }
  },
  methods: {
    handlerPageChange(val) {
      // value是页码和页的大小
      this.pageParams = val
      // 当page改变时需要做的逻辑
      this.$emit('changePage', val)
    }
  }
}
</script>
